<template>
<div class="yjai">
    <el-form
        label-position="top"
        :model="state.form"
    >
        <el-form-item label="图像描述">
            <el-input
                v-model="state.form.content"
                maxlength="200"
                placeholder="写下你的图像描述"
                show-word-limit
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 8 }"
            />
        </el-form-item>
        <el-form-item label="尺寸">
            <div class="size-box">
                <div class="size-item" v-for="item in state.size" :key="item.text" :class="{active: item.active}" @click="size_click(item)">
                    <div class="content-text">{{item.text}}</div>
                </div>
            </div>
        </el-form-item>
        <el-form-item label="风格">
            <div class="style-select">
                <div
                    class="style-item"
                    v-for="item in state.group_list"
                    :key="item.name"
                    :class="{active: item.active}"
                    @click="yjai_style_select_click(item)"
                >
                    <div class="content-text">{{item.name}}</div>
                </div>
            </div>
            <div class="style">
                <div
                    v-for="item in state.styleDetails"
                    :key="item.name"
                    class="style-item"
                    :class="{active: item.active}"
                >
                    <el-image
                        class="image"
                        fit="cover"
                        :src="item.poster"
                        @click="onStyle(item)"
                    />
                    <div class="text">
                        <span>{{item.text}}</span>
                    </div>
                </div>
            </div>
        </el-form-item>
    </el-form>
</div>
</template>

<script setup lang="ts">
import {reactive, watch} from "vue";
import { get_style } from "/@/api/frontend/chat/draw"

const props = defineProps({
    data: {
        type: Object,
        default: () => {
            return {
                content: '',
                size: '1:1',
            }
        }
    },
});

const state: {
    group_name: string,
    group_list: any[],
    form: any,
    size: any[],
    style: any,
    styleDetails: any,
} = reactive({
    group_name: '通用设计',
    group_list: [
        { name: '通用设计', active: true },
        { name: '动漫设计', active: false },
        { name: '现实设计', active: false },
    ],
    form: {
        content: "",
        ratio: 1, // 尺寸
        style: "", // 风格
    },
    size: [
        {text: "4:3", value: 0, active: true},
        {text: "3:4", value: 1, active: false},
        {text: "1:1", value: 2, active: false},
        {text: "16:9", value: 3, active: false},
        {text: "9:16", value: 4, active: false}
    ],
    style: [],
    styleDetails: [],
})

// 监听数据变化,并且向父组件发送数据
const emit = defineEmits(['update:data']);
watch(() => state.form, (val) => {
    emit('update:data', val);
}, { deep: true });

const size_click = (item: any) => {
    state.size.forEach((value: any) => {
        value.active = false
    })
    state.form.ratio = item.value
    item.active = true
}
const yjai_style_select_click = (item: any) => {
    state.group_list.forEach((value: any) => {
        value.active = false
    })
    item.active = true
    state.group_name = item.name
    default_style_list(item.name)
}
const get_style_list = (params: object) => {
    get_style(params).then((res: any) => {
        if(res.code == 1) {
            state.style = res.data
            //state.size = res.data.imageSizes
            // 获取默认样式
            default_style_list(state.group_name)
        }
    })
}
get_style_list({type: 'yjai'})
const default_style_list = (default_style_name: string) => {
    state.styleDetails = []
    state.style.styleDetails.forEach((value: any) => {
        if(default_style_name == value.group_name) {
            state.styleDetails.push(value)
        }
    })
    state.styleDetails[0].active = true
}
const onStyle = (item: any) => {
    state.form.style = item.value
    state.styleDetails.forEach((value: any) => {
        value.active = false
    })
    item.active = true
}
</script>

<style scoped lang="scss">

</style>
